<template>
  <div class="board-adder">
    Board Adder
    <input type="text" v-model="boardTitle" placeholder="Please input board">
    <button @click="addBoard">Add Board</button>
  </div>
</template>

<script>
    import {createBoard} from "../../apis/board";

    export default {
        name: "board-adder",
        data () {
            return {
                boardTitle: ""
            }
        },
        methods: {
            addBoard()
            {
                createBoard(this.boardTitle).then((res) => {
                    location.reload();
                });
            }
        }
    }
</script>

<style scoped>
  .board-adder {
    text-align: left;
    width: 300px;
    min-height: 100px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    padding-top: 5px;
    padding-bottom: 20px;
  }
</style>
